<!doctype html>
<html>
	<head>
		<script type="text/javascript">
			
			
			
			/**
			 *@see https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors
			 *http://davidowens.wordpress.com/2010/09/07/html-5-canvas-and-dashed-lines/ (sample idea)
			 *http://stackoverflow.com/questions/7352769/dashed-curves-on-html5-canvas-bezier
			 *http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
			 *
			 **/
			
			function init(){
				var eQuilt = document.getElementById('quilt');
				var ctx = eQuilt.getContext('2d');
				
				var lingrad = ctx.createLinearGradient(0,0,100,0);  
				lingrad.addColorStop(0, '#ffffff');  
				lingrad.addColorStop(0.5, '#00FF00');  
				lingrad.addColorStop(0.5, '#0000FF');  
				lingrad.addColorStop(1, '#ffffff'); 
				
//				var lingrad2 = ctx.createLinearGradient(0,50,0,95);  
//				lingrad2.addColorStop(0.5, '#000');  
//				lingrad2.addColorStop(1, 'rgba(0,0,0,0)');  
  
//				ctx.fillStyle = lingrad;  
//				ctx.strokeStyle = lingrad2;  

				ctx.lineWidth = 1;
				ctx.strokeStyle = lingrad;  
				//ctx.strokeStyle = lingrad2;  
  
//				ctx.moveTo(0, 10);
//				ctx.lineTo(100, 10);
//				
//				ctx.stroke();
				
//				ctx.fillRect(10,10,130,130);  
//				ctx.strokeRect(50,50,50,50);	

				ctx.lineWidth = 10;
				//var myPattern = generateDottedPattern(ctx.lineWidth);
				var myPattern = generateLinePattern(0,0, 20, 20, 5);
				var ptrn = ctx.createPattern(myPattern, 'repeat');
				
				ctx.strokeStyle = ptrn;
				
//				ctx.fillStyle = ptrn;
//				ctx.fillRect(100, 100, 100, 100);
				

				var t1 = (new Date()).getMilliseconds();
//				ctx.moveTo(0, 10);
//				ctx.lineTo(100, 10);
				
				ctx.save();
				ctx.translate(10, 10);
				ctx.moveTo(0, 00);
				ctx.lineTo(90, 90);
				
				
//				ctx.moveTo(10, 10);
//				ctx.lineTo(10, 100);
				
				ctx.stroke();
				ctx.restore();
				var t2 = (new Date()).getMilliseconds();
				console.info("Took " + (t2 - t1) + " ms");
				
			}
			
			/**Generates a dotted pattern.
			 *Due to the way patterns fill/stroke we need to know the line width to
			 *have a nice looking dotted line*/
			function generateDottedPattern(lineWidth){
				var tempCanvas = document.createElement('canvas');
				tempCanvas.setAttribute('width', lineWidth);
				tempCanvas.setAttribute('height', lineWidth);
				tempCanvas.setAttribute('id', 'tempCanvas');
				tempCanvas.style.border = '1px solid gray';
				document.body.appendChild(tempCanvas);
				
				var tempContext = tempCanvas.getContext('2d');
				
				tempContext.strokeStyle = '#000000';
				tempContext.fillStyle = '#000000';
				
//				tempContext.lineTo(2, 0);
//				tempContext.stroke();

//				tempContext.save();
//				tempContext.translate(lineWidth / 2, lineWidth / 2);
//				tempContext.rotate(Math.PI / 4);
//				tempContext.fillRect(0, 0, lineWidth, lineWidth);
//				tempContext.translate(-lineWidth / 2, -lineWidth / 2);
//				tempContext.restore();
				tempContext.arc(lineWidth/2, lineWidth/2, lineWidth / 2, 0, 2 * Math.PI);
				tempContext.stroke();
				
				return tempCanvas;
			}
			
			function generateLinePattern(x1, y1, x2, y2, lineWidth ){
				var width = Math.abs(x2 - x1);
				var height = Math.abs(y2 - y1);
				
				var tempCanvas = document.createElement('canvas');
				tempCanvas.setAttribute('width', width+4);
				tempCanvas.setAttribute('height', height+4);
				//tempCanvas.setAttribute('id', 'tempCanvas');
				tempCanvas.style.border = '1px solid gray';
				document.body.appendChild(tempCanvas)
				
				var tempContext = tempCanvas.getContext('2d');
				
				tempContext.lineWidth = lineWidth;
				tempContext.strokeStyle = '#000000';
				tempContext.fillStyle = '#0000FF';
				tempContext.lineCap = 'square';
				
				tempContext.moveTo(0, 0);
				tempContext.lineTo(width, height);
				
				tempContext.stroke();
				
				return tempCanvas;
			}
			
			window.addEventListener('load', init);
		</script>
	</head>
	<body>
		<canvas style="border: 1px solid red;" width="300" height="300" id="quilt"></canvas>		
	</body>
</html>